@extends('admin.layouts.base')
@section('content')
    <el-col :span="24">
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="ID"></el-table-column>
            <el-table-column prop="user.id" label="用户id"></el-table-column>
            <el-table-column prop="user.name" label="用户"></el-table-column>
            <el-table-column prop="time" label="时间"></el-table-column>
            <el-table-column prop="order_id" label="订单ID"></el-table-column>

            <el-table-column prop="details" label="评论"></el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handleDelete(scope.row.id)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="total" @current-change="handlePageChange"
                       :page-size="15"></el-pagination>
    </el-col>
@endsection
@section('scripts')
    <script>
        new Vue({
            el: '#app',
            data: function () {
                return {
                    tableData: [],
                    visible: false,
                    filter: {
                        page: 1,
                    },
                    total: 0,
                    form: {
                        name: '',
                        // region: '',
                        // date1: '',
                        // date2: '',
                        // delivery: false,
                        attrs: [],
                        // resource: '',
                        // desc: ''
                    }
                }
            },
            methods: {
                handleDelete(id) {
                    this.$confirm('此操作将永久删除该评论, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        let self = this;
                        axios.post('{{route('admin.comments.destroy')}}', {'id': id}).then(function (res) {
                            self.$message(res.data.msg);
                            self.getLists();
                        });

                    }).catch(() => {
                    });
                },

                getLists() {
                    let self = this;
                    axios.post('{{route('admin.comments.list')}}', this.filter).then(function (res) {
                        if (res.data.status !== 0) {
                            self.$message('s');
                        } else {

                            self.tableData = res.data.data.data;
                            self.filter.page = res.data.data.current_page;
                            self.total = res.data.data.total;
                        }
                    })
                },
                handlePageChange(e) {
                    this.filter.page = e;
                    this.getLists();
                },
            },
            mounted() {
                this.getLists();
            }
        })
    </script>
@endsection
